<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>刘昊然的空间网页</title>

		<style>
			.over {
				position: fixed;
				left: 0;
				top: 0;
				width: 100%;
				z-index: 100;
			}

			.tempContainer {
				position: fixed;
				width: 100%;
				margin-right: 0px;
				margin-left: 0px;
				text-align: center;
				z-index: 101;
			}
		</style>
		<script src="js/jquery-3.4.1.min.js"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.over {
				position: fixed;
				left: 0;
				top: 0;
				width: 100%;
				z-index: 100;
			}

			.tempContainer {
				position: fixed;
				width: 100%;
				margin-right: 0px;
				margin-left: 0px;
				text-align: center;
				z-index: 101;
			}

			.first {
				display: block;
				width: 1900px;
				height: 130px;
				background: #000000;
			}

			.first img {
				height: 110px;
				width: 220px;
				float: left;
				margin-left: 100px;
				margin-top: 10px;
			}

			.first img:link {}



			.first ul {
				width: 480px;
				height: 130px;
				list-style: none;
				margin-right: 150px;
				float: right;
			}

			.first ul li {
				float: left;
				width: 80px;
				line-height: 130px;
			}

			.first ul li a:visited {
				color: white;
			}

			.first ul li a:link {

				text-decoration: blink;
				font: 18px "Microsoft YaHei";
				color: white;
			}

			.first ul li a:hover {
				font: 20px "Microsoft YaHei";
				color: chocolate;
			}

			.fifth {
				width: 1900px;
				display: block;
				height: 500px;
				background: #000000;
			}

			.fifth_1 {
				display: block;
				height: 250px;
			}

			.fifth_1_1 {
				float: left;
				margin-left: 100px;
				margin-top: 100px;
				width: 400px;
			}

			.fifth_1_2 {
				float: left;
				margin-top: 100px;
				width: 400px;
			}

			h3 {
				font: 24px "楷体";
				color: white;
				padding-bottom: 10px;
				margin-bottom: 0px;
			}

			.fifth_1_1 ul {
				margin-top: 10px;
				padding-left: 0px;
			}

			.fifth_1_1 ul li {
				padding-top: 4px;
				padding-bottom: 5px;
				list-style-type: none;
			}

			.fifth_1_1 ul li span:hover {
				color: aqua;
			}


			.fifth_1_1 ul li span {
				font: 16px "microsoft yahei";
				color: white;
				padding-bottom: 20px;
			}

			.fifth_1_2 ul {
				margin-top: 10px;
				padding-left: 0px;
			}

			.fifth_1_2 ul li {
				padding-top: 4px;
				padding-bottom: 5px;
				list-style-type: none;
			}

			.fifth_1_2 ul li span {
				font: 16px "microsoft yahei";
				color: white;
				padding-bottom: 20px;
			}

			.fifth_1_2 ul li span:hover {
				color: aqua;
			}


			.fifth_1_3 {
				margin-top: 100px;
				float: left;
				width: 320px;
				box-sizing: border-box;
			}


			.fifth_1_4 {
				margin-top: 100px;
				float: left;
				width: 400px;
				margin-left: 120px;
				box-sizing: border-box;
			}

			.fifth_1_4 ul {
				margin-top: 10px;
				padding-left: 0px;
			}

			.fifth_1_4 ul li {
				padding-top: 4px;
				padding-bottom: 5px;
				list-style-type: none;
			}



			.fifth_1_4 ul li span {
				font: 16px "microsoft yahei";
				color: white;
				padding-bottom: 20px;
			}


			.fifth_1_3 .font_1 {
				margin-top: 10px;
				float: left;
				border-radius: 20px;
				width: 80px;
				text-align: center;
				font: 24px "楷体";
				color: white;
				background: #555555;
			}

			.fifth_1_3 .font_1:hover {
				background: aqua;
			}

			.fifth_1_3 .font_2 {
				margin-top: 10px;
				margin-left: 10px;
				float: left;
				border-radius: 20px;
				width: 100px;
				text-align: center;
				font: 24px "楷体";
				color: white;
				background: #555555;
			}

			.fifth_1_3 .font_2:hover {
				background: aqua;
			}


			.bb1 {
				width: 250px;
				height: 28px;
				margin-top: 20px;
			}

			.search {
				width: 222px;
				height: 28px;
				border: 1px solid #e5e5e5;
				background: #f1f1f1;
				outline: none;
				padding-left: 20px;
				position: absolute;
			}

			.btn {
				width: 28px;
				height: 27px;
				margin-left: 200px;
				margin-top: 1px;
				background-repeat: no-repeat;
				/* 大小 */
				background-size: 28px 28px;
				/* 位置 */
				background-position: center;
				background-image: url(
https://htmlpicture.oss-cn-beijing.aliyuncs.com/search.png);
				border: none;
				position: absolute;
				cursor: pointer;
			}

			.fifth_2 {
				margin: 0 auto;
				margin-top: 100px;
				height: 8px;
				width: 1500px;
				background: #555555;
			}

			.fifth_3 {
				margin-top: 50px;
				color: white;
				font: 20px "microsoft yahei";
				float: right;
				margin-right: 50px;
			}

			.second {
				width: 1900px;
				height: 665px;
				background: white;
			}

			.second_1 {
				text-align: center;
				margin-top: 100px;
				margin-left: 200px;
				display: inline-block;
			}

			.second_1 img {
				width: 300px;
				height: 300px;
				margin: 0 auto;
				border-radius: 50%;
			}

			.second_2 {
				text-align: center;
				margin-top: 100px;
				margin-left: 200px;
				display: inline-block;
			}

			.second_2 img {
				width: 300px;
				height: 300px;
				margin: 0 auto;
				border-radius: 50%;
			}

			.second_3 {
				text-align: center;
				margin-top: 100px;
				margin-left: 200px;
				display: inline-block;
			}

			.second_3 img {
				text-align: center;
				width: 300px;
				height: 300px;
				margin: 0 auto;
				border-radius: 50%;
			}

			.second a span {
				text-align: center;
				display: block;
				margin-top: 20px;
				font: bold 50px "楷体";
				color: #00FFFF;
				transition: color 1.5s;
			}

			.second a span:hover {
				color: saddlebrown;
			}
		</style>
	</head>
	<body>
		<div class="first">
			<a href="首页.html"><img src="
https://htmlpicture.oss-cn-beijing.aliyuncs.com/1.01.png" ></a>
			<ul>
				<li><a href="首页.html">主页</a></li>
				<li><a href="我的.html">me</a></li>
				<li><a href="动态.html">动态</a></li>
				<li><a href="图片馆.html">图像馆</a></li>
				<li><a href="博客.html">博客</a></li>
				<li><a href="联系我们.html">联系我们</a></li>
			</ul>
		</div>
<div class="over"></div>
		<div class="second amplifyImg">
			<div class="second_1">
				<a><img src="
https://htmlpicture.oss-cn-beijing.aliyuncs.com/me01.png"></a>
				<a><span>刘昊然-杂志</span></a>
				<span>刘昊然 《时尚芭莎》九月大片，<br>时尚的质感《Size潮流生活》《红秀GRAZIA》<br><br><br></span>
			</div>
			<div class="second_2">
				<a><img src="
https://htmlpicture.oss-cn-beijing.aliyuncs.com/me02.png"></a>
				<a><span>刘昊然的同年照</span></a>
				<span>可爱的脸庞和乖巧的气质和如今没<br>有太大差别，尤其是那颗标志性的小虎牙更加<br>让影迷坚信这就是自家偶像的童年照。<br><br></span>

			</div>
			<div class="second_3">
				<a><img src="
https://htmlpicture.oss-cn-beijing.aliyuncs.com/me03.png"></a>
				<a><span>刘昊然电影《双生》</span></a>

				<span>该片讲述了艺术学校的学生李拼找到<br>了一份兼职工作，为女孩涛画肖像画，来到了<br>一处偏僻的林中豪宅，期间发生了一系列诡异事<br>件的故事。</span>
			</div>
		</div>

		<div class="fifth">
			<div class="fifth_1">
				<div class="fifth_1_1">
					<h3>近期活动</h3>
					<ul>
						<a href="https://weibo.com/u/2870450862" target="_blank"><li><span>1.刘昊然的近期行程</span></li></a>
						<a href="https://weibo.com/u/2870450862" target="_blank"><li><span>2.刘昊然去微博之夜</span></li></a>
						<a href="https://weibo.com/u/2870450862" target="_blank"><li><span>3.刘昊然的电视剧发布会</span></li></a>
						<a href="https://weibo.com/u/2870450862" target="_blank"><li><span>4.刘昊然去电影颁奖典礼</span></li></a>
						<a href="https://weibo.com/u/2870450862" target="_blank"><li><span>5.刘昊然20岁生日宴会</span></li></a>
					</ul>
				</div>
				<div class="fifth_1_2">
					<h3>近期评论</h3>
					<ul>
						<a href="https://weibo.com/u/2870450862" target="_blank"><li><span>1.20岁的好多天，依旧不如你聪明</span></li></a>
						<a href="https://weibo.com/u/2870450862" target="_blank"><li><span>2.生日快乐，祝你每天能吃到不一样的果冻。</span></li></a>
						<a href="https://weibo.com/u/2870450862" target="_blank"><li><span>3.怎么样的你我们都满意。生日快乐昊然！</span></li></a>
						<a href="https://weibo.com/u/2870450862" target="_blank"><li><span>4.宝贝生日快乐！要永远开心快乐！</span></li></a>
						<a href="https://weibo.com/u/2870450862" target="_blank"><li><span>5.你忙归忙什么时候有空嫁给我</span></li></a>
		
					</ul>
				</div>
				<div class="fifth_1_3">
					<h3>标签</h3>
					<a href="https://weibo.com/u/2870450862" target="_blank"><div class="font_1">小清新</div></a>
					<a href="https://weibo.com/u/2870450862" target="_blank"><div class="font_2">呆萌</div></a>
					<a href="https://weibo.com/u/2870450862" target="_blank"><div class="font_2">演员</div></a>
					<a href="https://weibo.com/u/2870450862" target="_blank"><div class="font_2">艺人</div></a>
					<a href="https://weibo.com/u/2870450862" target="_blank"><div class="font_2">长腿欧巴</div></a>
					<a href="https://weibo.com/u/2870450862" target="_blank"><div class="font_2">文艺青年</div></a>
					<a href="https://weibo.com/u/2870450862" target="_blank"><div class="font_2">暖心学长</div></a>
				</div>
				<div class="fifth_1_4">
					<h3>关于</h3>
					<ul>
						<li><span>想要知道更多</span></li>
					</ul>
					<div class="bb1">
						<input type="text" class="search" placeholder="SEARCH...">
						<a href="https://www.baidu.com/s?wd=%E5%88%98%E6%98%8A%E7%84%B6&rsv_spt=1&rsv_iqid=0xefa9f6080001e09b&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_dl=ib&rsv_sug3=8&rsv_sug1=8&rsv_sug7=101" target="_blank"><input type="text" class="btn"></a>
					</div>
				</div>
			</div>
			<div class="fifth_2">
			</div>
			<div class="fifth_3">
				Copyright © 2019 - 2021 南工院 移动1813 顾兆远版权所有
			</div>
		</div>
	</body>
</html>

<script>
	$(document).ready(function() {
		var imgsObj = $('.amplifyImg img');
		if (imgsObj) {
			$.each(imgsObj, function() {
				$(this).click(function() {
					var currImg = $(this);
					coverLayer(1);
					var tempContainer = $('<div class=tempContainer></div>'); 
					with(tempContainer) { 
						appendTo("body");
						var windowWidth = $(window).width();
						var windowHeight = $(window).height();
						var orignImg = new Image();
						orignImg.src = currImg.attr("src");
						var currImgWidth = orignImg.width;
						var currImgHeight = orignImg.height;
						if (currImgWidth < windowWidth) { 
							if (currImgHeight < windowHeight) {
								var topHeight = (windowHeight - currImgHeight) / 2;
								if (topHeight > 35) { 
									topHeight = topHeight - 35;
									css('top', topHeight);
								} else {
									css('top', 0);
								}
								html('<img border=0 src=' + currImg.attr('src') + '>');
							} else {
								css('top', 0);
								html('<img border=0 src=' + currImg.attr('src') + ' height=' + windowHeight + '>');
							}
						} else {
							var currImgChangeHeight = (currImgHeight * windowWidth) / currImgWidth;
							if (currImgChangeHeight < windowHeight) {
								var topHeight = (windowHeight - currImgChangeHeight) / 2;
								if (topHeight > 35) {
									topHeight = topHeight - 35;
									css('top', topHeight);
								} else {
									css('top', 0);
								}
								html('<img border=0 src=' + currImg.attr('src') + ' width=' + windowWidth + ';>');
							} else {
								css('top', 0);
								html('<img border=0 src=' + currImg.attr('src') + ' width=' + windowWidth + '; height=' + windowHeight +
									'>');
							}
						}
					}
					tempContainer.click(function() {
						$(this).remove();
						coverLayer(0);
					});
				});
			});
		} else {
			return false;
		}
		function coverLayer(tag) {
			with($('.over')) {
				if (tag == 1) {
					css('height', $(document).height());
					css('display', 'block');
					css('opacity', 1);
					css("background-color", "#FFFFFF");
					css("background-color", "rgba(0,0,0,0.7)"); 
				} else {
					css('display', 'none');
				}
			}
		}
	});
</script>
